<template>
	
	<view class="item bgf r20 mt20 ml30 mr30 p30" v-for="item in data" :key="item.id"
	@click="$go('/pages/workerClient/myCar/appply?id='+item.id)"
	>
		<view class="f30 c3 bold">
			{{item.car_number}}
		</view>
		
		<view class="f24 c9 mt16">
			{{$time(item.createtime,5)}}
		</view>
		<view class="t-flex between mt20">
			<view class="c6">
				车辆信息
			</view>
			<view class="c3">
				{{item.car_dl_name}}/{{item.car_type_name}}
			</view>
		</view>
		<view class="t-flex between mt20">
			<view class="c6">
				品牌型号
			</view>
			<view class="c3">
				{{item.pp_name}}
			</view>
		</view>
		<view class="t-flex between mt20">
			<view class="c6">
				保险到期
			</view>
			<view class="c3">
				{{$time(item.bxdq_time,2)}}
			</view>
		</view>
		
		<view class="btn t-flex mt30 between pt20">
			<view class="f24 c9">
				查看
			</view>
			<text class="icon-xiangyou1 iconfont"></text>
		</view>
		<view class="status" :class="item.status==1?'':item.status==2?'red':'gr'">
			{{item.status==1?'审核通过':item.status==2?'审核未通过':'审核中'}}
		</view>
	</view>
	
	<empty msg="还未添加车辆" v-if="data.length === 0"></empty>
	
	<view class="bpad"></view><view class="bpad"></view>
	<view class="Allbottom t-flex center safeArea" >
		<view class="btn t-flex center cf f30" @click="$go('/pages/workerClient/myCar/appply')">添加新车辆</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad,onPullDownRefresh,onReachBottom,onUnload} from "@dcloudio/uni-app"
	import { usePaging } from "../../../lib/ts/util";
	
	
	const {
		data,
		reload,
		getMore
	} = usePaging('/api/user/MyCarList')
	
	
	onLoad(()=>{
		reload()
	})
	onPullDownRefresh(()=>{
		reload()
	})
	onReachBottom(()=>{
		getMore()
	})
	onUnload(()=>{
		uni.$off('updateMyCar')
	})
	uni.$on('updateMyCar',()=>{
		reload()
	})

</script>

<style scoped lang="scss">
	.mt16{
		margin-top: 16rpx;
	}
	.btn{
		border-top: 1px solid #F3F3F3;
		.iconfont{
			color: #d5d5d5;
		}
	}
	
	.item{
		position: relative;
		.status{
			font-size: 26rpx;
			color: #FC9F00;
			background-color: #FFF3BA;
			padding: 10rpx 18rpx;
			border-radius: 0rpx 20rpx 0rpx 20rpx;
			position: absolute;
			top: 0;
			right: -9rpx;
			&::after{
				content: '';
				display: block;
				border: 8rpx solid transparent;
				border-bottom-color: #E7BE00;
				width: 0;
				height: 0;
				transform: rotate(-.125turn);
				position: absolute;
				right: 0;
			}
		}
		.status.red{
			color: $main-color;
			background-color: $main-color-opcity2;
			&::after{
				border-bottom-color: $main-color-opcity4;
			}
		}
		.status.gr{
			color: #666;
			background-color: #eee;
			&::after{
				border-bottom-color: #ccc;
			}
		}
	}
	
	
	
	
</style>
